import { NavBar } from 'antd-mobile'
import { useLoaderData, useNavigate } from 'react-router-dom'
import styles from '../css/ticket.module.css'

function Header() {
  const nav = useNavigate()
  // 4. 获取 loader return 的数据，并渲染出车次信息
  const loaderData = useLoaderData()

  return (
    <div className={styles.navBox}>
      <NavBar onBack={() => nav(-1)}>{loaderData.info.trainNo}</NavBar>
    </div>
  )
}

export default Header
